<template>
  <div v-if="isDashboard" class="theme-toggle">
    <el-dropdown @command="handleThemeChange" trigger="click">
      <el-button type="primary" :icon="themeIcon" circle class="floating-button">
        <el-icon><Sunny v-if="currentTheme === 'light'" /><Moon v-else /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="auto" :class="{ active: theme === 'auto' }">
            <el-icon><Refresh /></el-icon>
            自动模式
            <el-tag v-if="theme === 'auto'" size="small" type="success">当前</el-tag>
          </el-dropdown-item>
          <el-dropdown-item command="light" :class="{ active: theme === 'light' }">
            <el-icon><Sunny /></el-icon>
            浅色主题
            <el-tag v-if="theme === 'light'" size="small" type="success">当前</el-tag>
          </el-dropdown-item>
          <el-dropdown-item command="dark" :class="{ active: theme === 'dark' }">
            <el-icon><Moon /></el-icon>
            深色主题
            <el-tag v-if="theme === 'dark'" size="small" type="success">当前</el-tag>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useThemeStore } from '../stores/theme'
import { Sunny, Moon, Refresh } from '@element-plus/icons-vue'

const route = useRoute()
const themeStore = useThemeStore()

const theme = computed(() => themeStore.theme)
const currentTheme = computed(() => themeStore.currentTheme)

// 判断当前是否在主页（Dashboard）
const isDashboard = computed(() => {
  return route.path === '/dashboard'
})

const themeIcon = computed(() => {
  if (theme.value === 'auto') {
    return 'Refresh'
  }
  return currentTheme.value === 'light' ? 'Sunny' : 'Moon'
})

const handleThemeChange = (command) => {
  themeStore.setTheme(command)
}
</script>

<style scoped>
.theme-toggle {
  position: fixed;
  top: 90%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 1000;
}

.floating-button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: white;
}

.floating-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #5a6fd8, #6a4190);
}

/* 深色主题下的按钮样式 */
.dark-theme .floating-button {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-theme .floating-button:hover {
  background: linear-gradient(135deg, #34495e, #2c3e50);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.el-dropdown-menu .el-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.el-dropdown-menu .el-dropdown-item.active {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.el-dropdown-menu .el-dropdown-item .el-icon {
  margin-right: 4px;
}

/* 深色主题适配 */
.dark-theme .el-dropdown-menu {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

.dark-theme .el-dropdown-menu .el-dropdown-item {
  color: var(--text-primary);
}

.dark-theme .el-dropdown-menu .el-dropdown-item:hover {
  background-color: var(--hover-bg);
}

.dark-theme .el-dropdown-menu .el-dropdown-item.active {
  background-color: var(--today-bg);
  color: var(--today-border);
}

/* 移动端适配 */
@media (max-width: 768px) {
/* 仅 5+ App 环境生效（通过标记类精准控制） */
html.app-5plus .header {
  padding-top: var(--status-bar-height);
height: calc(55px + var(--status-bar-height));
}
  .theme-toggle {
    right: 15px;
  }
  
  .floating-button {
    width: 40px;
    height: 40px;
  }
}
</style> 